{% extends "base.html" %}

{% block content %}
<div class="statistics-container">
    <!-- 概览卡片 -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">总单词量</h5>
                    <h2 class="text-primary">{{ stats.total_words }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">已掌握</h5>
                    <h2 class="text-success">{{ stats.mastered_words }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">学习中</h5>
                    <h2 class="text-warning">{{ stats.in_progress }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="row">
        <!-- 每日新增单词趋势 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">每日新增单词</h5>
                    <canvas id="dailyWordsChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 复习次数分布 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">复习次数分布</h5>
                    <canvas id="reviewDistributionChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 每日新增单词趋势图
    const dailyWordsCtx = document.getElementById('dailyWordsChart').getContext('2d');
    new Chart(dailyWordsCtx, {
        type: 'line',
        data: {
            labels: [
                {% for date, count in stats.daily_new_words %}
                    '{{ date }}',
                {% endfor %}
            ],
            datasets: [{
                label: '新增单词数',
                data: [
                    {% for date, count in stats.daily_new_words %}
                        {{ count }},
                    {% endfor %}
                ],
                borderColor: '#3498db',
                tension: 0.1,
                fill: false
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });

    // 复习次数分布图
    const reviewDistCtx = document.getElementById('reviewDistributionChart').getContext('2d');
    new Chart(reviewDistCtx, {
        type: 'bar',
        data: {
            labels: [
                {% for review_count, count in stats.review_distribution %}
                    '{{ review_count }}次',
                {% endfor %}
            ],
            datasets: [{
                label: '单词数量',
                data: [
                    {% for review_count, count in stats.review_distribution %}
                        {{ count }},
                    {% endfor %}
                ],
                backgroundColor: '#2ecc71'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
});
</script>
{% endblock %} 